﻿<!DOCTYPE html>
<html>
<!-- 履职职责落实情况管理 -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }

        .vue-treeselect_style .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }

        .el-input-group__append {
            background-color: white;
            color: #909399;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border: 0px solid #DCDFE6;
            border-radius: 4px;
            padding: 0 20px;
            width: 1px;
            white-space: nowrap;
        }

        .inputNoBorder input {
            border: none;
        }

        .inputNoBorder .el-input__inner {
            border: none;
        }

        .el-date-editor el-input el-input--mini el-input--prefix el-input--suffix el-date-editor--date {
            /*border: 1px solid #DCDFE6*/
            border: none;
        }
    </style>
    <!-- 行内编辑 css-->
    <style>
        .tb-edit .el-input {
            display: none
        }

        .tb-edit .current-row .el-input {
            display: block
        }

            .tb-edit .current-row .el-input + span {
                display: none
            }

        .tb-edit .el-select {
            display: none
        }

        .tb-edit .current-row .el-select {
            display: block
        }

            .tb-edit .current-row .el-select + span {
                display: none
            }

        .xian {
            display: block;
            text-align: center;
        }

        .yin {
            display: none;
            text-align: center;
        }

        .lineMust {
            position: absolute;
            right: 15px;
            bottom: 2px;
            bottom: 3px\0 !important;
            /* 兼容ie */
        }
    </style>
    <!-- 行内编辑 css-->
</head>

<body>
    <div id="app" class="popupW100" v-cloak>
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 size="mini">
            <el-row>
                <el-col :span="4" :offset="5">
                    <el-form-item prop="years">
                        <el-input type="text" autocomplete="off" size="mini">
                            <template slot="append">
                                {{PerformanceAssessPlan.Years}}
                            </template>
                            <el-date-picker slot="suffix" v-model="Form.years" type="year" size="mini" format="yyyy"
                                            value-format="yyyy" placeholder="选择年度">
                            </el-date-picker>
                            <span class="lineMust" v-if="Form.years.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-input>

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="evaType">
                        <el-input size="mini">
                            <template slot="append">
                                {{PerformanceAssessPlan.AssessTitle}}
                            </template>
                            <el-select @visible-change="visibleChange" v-model="Form.evaType" slot="suffix"
                                       :placeholder="EvaTemplateSet.EvaType">
                                <el-option v-for="item in classification" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                            <span class="lineMust" v-if="Form.evaType.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">

                        <el-form-item prop="assessPurpose">
                            <el-input type="text" v-model="Form.assessPurpose" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{PerformanceAssessPlan.AssessPurpose+mark.m}}
                                </template>
                            </el-input>
                            <span class="lineMust" v-if="Form.assessPurpose.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item prop="assessTime">
                        <div class="elst-select-mini">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{PerformanceAssessPlan.AssessTime+mark.m}}
                                </template>
                                <el-date-picker slot="suffix" v-model="Form.assessTime" type="date" size="mini"
                                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间">
                                </el-date-picker>
                            </el-input>
                        </div>
                        <span class="lineMust" v-if="Form.assessTime.length<=0">
                            <!-- 必填项添加 -->
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </el-form-item>
                </el-col>

                <el-col :span="16" :offset="1">
                    <div class="elst-select-mini">
                        <el-form-item prop="assessContent">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{PerformanceAssessPlan.AssessContent+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="text" v-model="Form.assessContent"
                                          autocomplete="off"></el-input>
                                <span class="lineMust" v-if="Form.assessContent.length<=0">
                                    <!-- 必填项添加 -->
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <div class="elst-select-mini">
                        <el-form-item prop="assessObj">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{PerformanceAssessPlan.AssessObj+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="text" v-model="Form.assessObj"
                                          autocomplete="off"></el-input>
                                <span class="lineMust" v-if="Form.assessObj.length<=0">
                                    <!-- 必填项添加 -->
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="4" :offset="1">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{PerformanceAssessPlan.AssessPeopleCount+mark.m}}
                                </div>
                                <span class="el-input__inner">{{formInline.model.peopleCount}}人</span>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="11" :offset="1">
                    <!--负责人-->
                    <div class="elst-select-mini vue-treeselect_style">
                        <el-form-item prop="personInCharge">
                            <!--<el-input size="mini">
                                <template slot="prepend">

                                </template>
                                <tree-department-staff-single slot="suffix" v-model="Form.personInCharge" style="line-height:28px;"></tree-department-staff-single>
                            </el-input>-->
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{PerformanceAssessPlan.OverdueScope+mark.m}}
                                </div>
                                <template>
                                    <el-select v-model="Form.personInCharge" placeholder="请选择"  @change="postChange">
                                        <el-option v-for="item in treeDepartment"
                                                   :key="item.id"
                                                   :label="item.name"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                                <template>
                                    <el-select v-model="Form.personInCharge" placeholder="请选择">
                                        <el-option v-for="item in treeDepartment"
                                                   :key="item.id"
                                                   :label="item.name"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                                <span class="iputLineMust" v-if="!Form.personInCharge">
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <!--评审小组-->
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini vue-treeselect_style">

                        <el-form-item prop="reviewGroup">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{PerformanceAssessPlan.ReviewGroup+mark.m}}
                                </div>
                                <tree-department-staff class="el-textarea__inner" v-model="Form.reviewGroup"
                                                       :multiple="true" slot="suffix" style="line-height:28px;" placeholder="请选择" />
                                <span class="iputLineMust" v-if="!Form.reviewGroup">
                                    <img src="/static/images/exclamation.png" alt="">
                                </span>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini" style="margin-top: 5px;">
                        <el-form-item prop="assessMethod">
                            <el-input type="text" v-model="Form.assessMethod" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{PerformanceAssessPlan.AssessMethod+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.assessMethod">
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>

            <br />
            <el-row>
                <el-col class="head-tool">
                    <!--<el-button type="primary" @click="UserInput('tj')">被评估人添加</el-button>-->
                    <btn :text="col.btnAdd" linetype="4" @click="add"></btn>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="24">
                    <!--表格开始-->
                    <el-table ref="table" stripe @current-change="tableHandleCurrentChange" class="tb-edit"
                              :data="Form.employmentLicenseList" :row-key="getRowKeys" border
                              @selection-change="handleSelectionChange" row-style="height:10px" style="width: 100%;">

                        <el-table-column prop="department" show-overflow-tooltip="true"
                                         :label="PerformanceAssessPlan.Department">
                            <template scope="scope">
                                <!--<el-select @visible-change="visibleChange" v-model="scope.row.department" placeholder="请选择" size="mini">
                                    <el-option label="总经理" value="总经理"></el-option>
                                    <el-option label="HSE经理" value="HSE经理"></el-option>
                                    <el-option label="生产运营经理" value="生产运营经理"></el-option>
                                </el-select>-->
                                <!--<el-select @visible-change="visibleChange" @change="handleSelect" v-model="scope.row.Department" placeholder="请选择">
                                    <el-option v-for="item in TerritorialDepartment" :key="item.key" :label="item.value" :value="item.key"></el-option>
                                </el-select>-->
                                <!-- <tree-department :value="Form.Unit" :multiple="true" v-on:input="input"></tree-department> -->
                                <template>
                                    <el-select v-model="scope.row.department" placeholder="请选择">
                                        <el-option v-for="item in treeDepartment"
                                                   :key="item.id"
                                                   :label="item.name"
                                                   :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                                <span>{{scope.row.department}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="evaluator" :label="PerformanceAssessPlan.Evaluator"
                                         show-overflow-tooltip="true">
                            <template scope="scope">
                                <el-select @visible-change="visibleChange" v-model="scope.row.evaluator" placeholder="请选择" size="mini">
                                    <el-option label="崔军" value="崔军"></el-option>
                                    <el-option label="范丽" value="范丽"></el-option>
                                    <el-option label="张霞" value="张霞"></el-option>
                                </el-select>
                                <span>{{scope.row.evaluator}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="PerformanceAssessPlan.Post">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.post" placeholder="请输入内容">
                                </el-input>
                                <span>{{scope.row.post}}</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="straightLine" :label="PerformanceAssessPlan.StraightLine"
                                         show-overflow-tooltip="true">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.straightLine" placeholder="请输入内容">
                                </el-input>
                                <span>{{scope.row.straightLine}}</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" :label="PerformanceAssessPlan.Remarks"
                                         show-overflow-tooltip="true">
                            <template scope="scope">
                                <el-input size="mini" v-model="scope.row.remarks" placeholder="请输入内容">
                                </el-input>
                                <span>{{scope.row.remarks}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column width="90" prop="update" label="编辑">
                            <template slot-scope="scope">
                                <span class="start xian">
                                    <button type="button" class="elst-bt-xg"
                                            @click=Edit('xg',scope.row.id,scope.$index)>
                                        <i class="el-icon-edit"></i>
                                    </button>
                                </span>
                                <span class="end yin">
                                    <button type="button" class="elst-bt-xg " @click="Save(scope.$index, scope.row)">
                                        <i class="el-icon-circle-check-outline"></i>
                                        <!-- 保存 -->
                                    </button>
                                    <!--<button type="button" @click.native.prevent="deleteRow(scope.$index, Form.employmentLicenseList)">-->
                                    <button type="button" class="elst-bt-xg " @click="Back(scope.$index, scope.row)">
                                        <i class="el-icon-circle-close-outline"></i>
                                        <!-- 撤销 -->
                                    </button>
                                </span>
                            </template>
                        </el-table-column>


                        <el-table-column width="53" label="操作" fixed="right">
                            <template slot-scope="scope">
                                <button type="button" class="elst-bt-xg"
                                        @click="deleteRow(scope.$index, Form.employmentLicenseList)">
                                    <i class="el-icon-delete"></i>
                                </button>
                            </template>
                        </el-table-column>


                    </el-table>



                    <!--表格结束-->
                </el-col>
            </el-row>
            <br>

            <el-row type="flex" justify="end">
                <el-form-item>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>-->
                    el
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog title="履职职责落实情况管理" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%"
                   height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        var app = new Vue({
            el: '#app',
            data: {
                //获取评估类型下拉菜单
                classification: [],
                treeDepartment: [],
                treeUser: [],
                rowDepartment: [],
                rowUser:[],
                //业务表单内容
                Form: {
                    id: guidEmpty,
                    years: '',
                    evaType: '',
                    assessPurpose: '',
                    assessTime: '',
                    assessContent: '',
                    assessMethod: '',
                    reviewGroup: [],
                    personInCharge: null,
                    assessObj: '',
                    employmentLicenseList: [],
                    department: '',
                    evaluator: '',
                    post: '',
                    straightLine: '',
                    remarks: '',

                    Unit: '',


                },
                formInline: {
                    model: {
                        department: '',
                        evaluator: '',
                        post: '',
                        straightLine: '',
                        remarks: '',
                    },
                    offset: 0,
                    limit: 10
                },

                //表单验证
                rules: {


                }

            },

            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },

                //排查部门input
                input: function (value) {
                    this.Form.Unit = value;
                },

                // 行内编辑 js
                add: function (formName) {
                    if ($('tbody tr').attr("class") == "el-table__row current-row") {
                        showMessage(msg.EditingNotCompleted, 'error');
                    } else {


                        this.Form.department = '';//添加是清空录入数据的，每一项都要有
                        this.Form.evaluator = '';//添加是清空录入数据的，每一项都要有
                        this.Form.post = '';//添加是清空录入数据的，每一项都要有
                        this.Form.straightline = '';//添加是清空录入数据的，每一项都要有
                        this.Form.remarks = '';//添加是清空录入数据的，每一项都要有


                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');

                        //if (!this.Form.employmentLicenseList) {
                        //    this.Form.employmentLicenseList = [];
                        //}


                        var newObj = {
                            department: '',//添加是清空录入数据的，每一项都要有
                            evaluator: '',//添加是清空录入数据的，每一项都要有
                            post: '',//添加是清空录入数据的，每一项都要有
                            straightLine: '',//添加是清空录入数据的，每一项都要有
                            remarks: '',//添加是清空录入数据的，每一项都要有
                        }
                        this.Form.employmentLicenseList.unshift(newObj);
                        //this.Form.employmentLicenseList.unshift(this.Form);

                        setTimeout(function () {
                            $('.el-table__row:eq(0)').addClass('current-row');
                            $('.el-table__row:eq(0) span.end').removeClass('yin');
                            $('.el-table__row:eq(0) span.end').addClass('xian');
                            $('.el-table__row:eq(0) span.start').removeClass('xian');
                            $('.el-table__row:eq(0) span.start').addClass('yin');
                        }, 100);
                    }
                },
                //修改
                Edit: function (val, id, index) {
                    $('.el-table__row').removeClass('current-row');
                    $('.el-table__row:eq(' + index + ')').addClass('current-row');
                    $('.el-table__row span.end').removeClass('xian');
                    $('.el-table__row span.end').addClass('yin');
                    $('.el-table__row span.start').removeClass('yin');
                    $('.el-table__row span.start').addClass('xian');
                    $('.el-table__row:eq(' + index + ') span.end').removeClass('yin');
                    $('.el-table__row:eq(' + index + ') span.end').addClass('xian');
                    $('.el-table__row:eq(' + index + ') span.start').removeClass('xian');
                    $('.el-table__row:eq(' + index + ') span.start').addClass('yin');
                },
                // 保存 注意去掉mock中的parent 否则无法保存
                Save: function (a, b) {
                    if (!b.department) {
                        showMessage(msg.NoMust, 'error');
                    }
                    //else if (!this.check(b.score)) {
                    //    showMessage('赋值分数必须为正整数!', 'error');
                    //}
                    else {
                        // this.onSubmitForm('ruleForm', b);
                        //this.onSubmitForm('form', b);


                        //var newObj = {};
                        //$.extend(true, newObj, this.lsForm);

                        //console.log('newObj', newObj)
                        // this.Form.employmentLicenseList.unshift(newObj);

                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                        //初始化数据
                        // this.GetPageData(1);
                    }
                },
                Back: function (a, b) {
                    $('.el-table__row').removeClass('current-row');
                    $('.el-table__row span.end').removeClass('xian');
                    $('.el-table__row span.end').addClass('yin');
                    $('.el-table__row span.start').removeClass('yin');
                    $('.el-table__row span.start').addClass('xian');
                    //初始化数据
                    // this.GetPageData(1);
                    this.getData();
                },

                handblur: function () {
                    //this.$refs.table.setCurrentRow(999);
                    //console.log("c", 'c');
                },
                //table选中行handle
                tableHandleCurrentChange: function (currentRow) {
                    this.currSeelctId = currentRow.id;
                    this.currSeelctCell = currentRow;
                },
                // 行内编辑 js
                indexMethod: function (index) {
                    return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1;
                },

                //行删除
                onDeleteone: function (a, b) {
                    var abc = this;
                    //alert(a);
                    //alert(b);
                    this.$confirm(' 是否确认继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        //console.log(123)
                        //alert(b);
                        var delIds = [];
                        delIds.push(b);
                        var url = '/api/DutiesAndResponsibilities/OneDeleteMuti';
                        //alert(b);
                        //console.log(abc);
                        myAjax("post", abc, url, delIds, function (response) {
                            //alert(b);
                            abc.GetPageData(1);
                            abc.ListItem.currentPage = 1;
                            showMessage(msg.OperatingOk, "success");
                        });
                    }).catch(function () {
                        //showMessage("已取消删除!");
                    });
                },

                //提交数据
                onSubmitForm: function (formName) {
                    //alert(formName);
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            onSubmitForm(this, '/api/DutiesAndResponsibilities/SBSave', mythis.Form);
                        } else {
                            //验证失败
                            showMessage(msg.NoMust, 'error');
                            return false;
                        }

                        // onSubmitForm(this, '/api/DutiesAndResponsibilities/SBSave', mythis.Form);
                    });

                },

                getData: function () {
                    getData(this, '/api/DutiesAndResponsibilities/get?id=' + this.id);
                    //this.Form.situation = this.Form.situation + "";
                },
                //获取分页数据
                GetPageData: function (currentIndex) {
                    //GetPageData(this, currentIndex, '/api/DutiesAndResponsibilities/PGGetList')
                },
                //初始化部门下拉树
                getDepartmentData: function () {
                    console.log("初始化部门下拉树");
                    var mythis = this;
                    var order_model = {};
                    order_model.PropertyName = "Code";
                    order_model.IsDesc = false;
                    var order_list = [];
                    order_list.push(order_model);
                    myAjax("post", this, '/api/SysDepartment/GetList', {
                        model: { Name: '', Code: '', CreateFactory: 'CA84CACF-8A77-4D67-C41A-08D777C5C239' },
                        offset: 0,
                        limit: 999,
                        orderlist: order_list
                    }, function (response) {
                        mythis.treeDepartment = response.data.pageData;
                    }, false);
                    console.log(mythis.treeDepartment);
                },
                //删除列表行
                deleteRow: function (index, rows) {
                    rows.splice(index, 1);
                },
                handleSelect: function (ev) {
                    console.log(ev);
                },
                postChange: function (val) {
                    console.log(val);
                    myAjax("get", this, '/api/JG_DutiesPlan/GetUserByDepartment?id=' + val, null, function (response) {
                        mythis.treeUser = response.data.pageData;
                    }, false);

                },

            },
            mounted: function () {
                this.id = getUrlParam("id");
                //this.getData();
                //获取评估类型下拉列表
                this.classification = getDicData('EVATYPE');
                //列表高度自适应
                tablehigh(this);
                //行内获取部门
                this.getDepartmentData();
            },

        });
    </script>
</body>

</html>